<template>
    <div class="wrapper">
        <div class="banner">
          <div style="background-color: #d40c14;height: 100rpx"></div>
<!--            <img src="http://file.rzkeji.com/web/dang/question_banner.png">-->
        </div>
        <div class="content">
            <div style="width: 100%;text-align: center">
                <img style="width: 70%" src="http://file.rzkeji.com/web/dang/rank_header.png"  mode="widthFix"/>
            </div>
            <div class="rank_list_box">
                <ul class="rank_list_content">
                    <li class="rank_list" v-for="(rank,index) in newRankList" :key="index">
                        <div class="trophy">
                            <img v-if="index == 0" src="http://file.rzkeji.com/web/dang/champion.png" mode="widthFix">
                            <img v-if="index == 1" src="http://file.rzkeji.com/web/dang/second.png" mode="widthFix">
                            <img v-if="index == 2" src="http://file.rzkeji.com/web/dang/third.png" mode="widthFix">
                            <span class="rank-3-6" v-if="index > 2 && index < 6" style="">{{parseInt(index) + 1}}</span>
                        </div>
                        <div class="user-info-box">
                            <div class="user-info" v-for="(item,index) in rank" :key="index">
                                <img class="user-photo" :src="item.user_info.photo_url" />
                                <span class="user-name">{{item.user_info.nickname}}</span>
                            </div>
                        </div>
                        <div class="score-box">
                            <span class="score">{{rank[0].answer_score}}分</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "answerRank",
        data(){
            return {
                newRankList:[],
                rankList:[],
                key:""
            }
        },
        methods:{
            async getRankList(){
                let res=await this.$api.getAnswerRank({'key':this.key})
                if(res.data.level == "success"){
                    this.rankList = res.data.data
                    this.filterRankList(this.rankList)
                }else {
                    uni.showToast({
                    	icon:'none',
                    	title:res.data.message
                    })
                }
            },
            //过滤返回的数据，符合相同分数并行排名的要求
            filterRankList(list){
                let answer_score_arr = [];
                list.forEach(element => {
                    answer_score_arr.push(Number(element.answer_score));
                });
                let new_score_arr = [...new Set(answer_score_arr)];
                //数组从大到小排序
                new_score_arr.sort(function sortNumber(a,b){
                    return b - a
                })
                let theFirst = [];
                let second = [];
                let third = [];
                let fourth = [];
                let fifth = [];
                new_score_arr.forEach((score,index) => {
                    if(index<5){
                        list.forEach(user => {
                            if(index == 0){
                                if(score == Number(user.answer_score)){
                                    theFirst.push(user);
                                }
                            }else if(index == 1){
                                if(score == Number(user.answer_score)){
                                    second.push(user);
                                }
                            }else if(index == 2){
                                if(score == Number(user.answer_score)){
                                    third.push(user);
                                }
                            }else if(index == 3){
                                if(score == Number(user.answer_score)){
                                    fourth.push(user);
                                }
                            }else if(index == 4){
                                if(score == Number(user.answer_score)){
                                    fifth.push(user);
                                }
                            }
                        });
                    }
                })
                //向新整理的数组中添加
                if(theFirst.length > 0){
                    this.newRankList.push(theFirst)
                }
                if(second.length > 0){
                    this.newRankList.push(second)
                }
                if(third.length > 0){
                    this.newRankList.push(third)
                }
                if(fourth.length > 0){
                    this.newRankList.push(fourth)
                }
                if(fifth.length > 0){
                    this.newRankList.push(fifth)
                }
            },
        },

        onLoad(options){
            this.key=options.key;
            this.getRankList()
        },
    }
</script>

<style scoped>
    .wrapper{
        width:100%;
        height: 100vh;
		overflow-y: scroll;
        /*background: url('http://file.rzkeji.com/web/dang/small_backgroud.jpg');*/
        background-color: #d40c14;
        background-size: 100% 100%;
    }

    .content{
        padding-top: 0.3rem;
    }

    .banner{
        width: 100%;
    }

    .banner img{
        width: 100%;
    }
    .active_selected{
        background-color: #ff9b54;
    }
    .title{
        margin: 0 auto;
        width: 75%;
        height: 100%;
        background: url("http://file.rzkeji.com/web/dang/q_name.png");
        background-size: 100% 100%;
    }

    .tit{
        text-align: center;
        padding:80px 40px;
        font-size: 30px;
        color:white;
    }

    .qrcode_wrapper{
        margin-top: 40px;
        width:100%;
        text-align: center;
    }
    .qrcode_wrapper p{
        margin-top: 10px;
        color: white;
    }
    .count{background-color: orange;border-radius: 50%;width: 200px;height: 200px;line-height: 200px;margin: 0 auto;margin-top: 30px;font-size: 100px;text-align: center;color: white}
    .question{
        font-size: 30px;
        text-align: center;
        margin-top:20px;
        width:calc(100% - 80px);
        margin-left:40px;
        background:#fff;
        border:1px solid #fff;
    }

    .man_item_list{
        display: flex;
        flex-wrap: wrap;
        margin-top:0.2rem;
        padding: 0 20px;
        color:#fff;
        font-size: 30px
    }
    .man_item{
        text-align: center;
        margin:10px;
    }
    .man_item div{
        width: 100%;
    }
    .man_item img{
        width:1.3rem;
        height: 1.3rem;
        object-fit:cover;
        border-radius: 50%;
    }
    .answering{
        color:#eee;
    }

    .rank_list_box{
        width: 90%;
		margin: 0 auto;
    }

    .rank_list_box .rank_list_content{
        width: 100%;
        color: white;
    }

    .rank_list_box .rank_list_content .rank_list{
        margin-bottom: 14px;
        width: 100%;
        background-color: #f39580;
        display: flex;
        align-items: center;
        border-radius: 10px;
    }

    .rank_list .trophy{
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px dashed #817e7c;
        padding: 20px;
        flex: 1;
    }

    .rank_list .trophy img{
        width: 60rpx;
    }

    .rank_list .trophy .rank-3-6{
        color: #ff1313;
        font-size: 18px;
        line-height: 50px;
    }

    .rank_list .user-info-box{
        flex: 8;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin:0 20rpx;
    }

    .rank_list .user-info-box .user-info{
        display: flex;
        justify-content: center;
        align-items: center;
        margin:0 20rpx;
    }

    .rank_list .user-info-box .user-info .user-photo{
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
    }

    .rank_list .user-info-box .user-info .user-name{
        /*color: #817e7c;*/
        color: #fff;
        width: 80px;
        font-size: 18px;
        margin-left: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .rank_list .score-box{
        flex: 2;
        font-size: 28rpx;
        font-weight: 600;
        color: #fff;
    }

    .clearfix:after,
    .clearfix:before {   /*清除浮动*/
    content: " ";
    display: table;
    }

    .clearfix:after {
    clear: both;
    }
</style>
